<template>
	<view class="box">
		<view class="header"></view>
		<view class="content">
			<uni-card title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view class="dehead">
							<text class="name">{{ dataDetail.name || '' }}</text>
							<view style="float: right;">
								<image v-if="dataDetail.cabinetState.signalIntensity"
									style="width: 30rpx; height: 30rpx; position: relative; top: 4rpx;left: 12rpx;"
									:src="signalData[dataDetail.cabinetState.signalIntensity]"></image>
								<image v-else
									style="width: 30rpx; height: 30rpx; position: relative; top: 4rpx;left: 12rpx;"
									src="/static/signal0.png"></image>

							</view>
						</view>
						<view class="clear"></view>
					</view>
				</template>
				<view class="uni-body" style="color: #1976D3;">
					设备状态：<text v-if="dataDetail.isEnable === 1">运营中</text><text v-if="dataDetail.isEnable === 0"
						style="color: red;">已停用</text>
				</view>
				<view class="uni-body">
					设备编号：<text>{{ dataDetail.code || '' }}</text>
				</view>
				<view class="uni-body">
					地址：<text>{{ dataDetail.address || '暂无' }}</text>
				</view>
				<view class="uni-body">
					所属场站：<text>{{dataDetail.chargingNetwork.name || '暂无' }}</text>
				</view>
				<view class="uni-body">
					所属运营商：<text>{{ dataDetail.chargingNetwork.organization.name || '暂无' }}</text>
				</view>
				<view class="uni-body">
					联系人电话：<text>{{ dataDetail.chargingNetwork.contactPhone || '暂无' }}</text>
					<text @click="telPhone(dataDetail.chargingNetwork.contactPhone)"
						style="margin-left: 15px; font-size: 14px; color: #4DA7FF;">
						<text class="icon iconfont" style="margin-right: 5px; color: #4DA7FF;">&#xe96d;</text>联系
					</text>
				</view>
			</uni-card>
			<uni-card>
				<view style="margin-bottom: 15px;">
					<view class="wareHouse" v-for="(item, index) in wareList" :key="index">
						<view class="enableClass" v-if="!item.doorIsEnable" @click="wareDetail(item)">
							禁用
						</view>
						<view v-else @click="wareDetail(item)"
							:class="{ 'wareHouse1' : item.status == 0, 'wareHouse2' : item.status == 1, 'wareHouse3' : item.status == 2 }">
							{{statusData[item.status]}}
						</view>
						<view class="clear"></view>
						<view class="wareHouseText" style="text-align: center;">
							{{ item.binIndex }}号仓
						</view>
						<view class="clear"></view>
					</view>
					<view class="clear"></view>
				</view>
			</uni-card>
			<uni-card title="" extra="">
				<template v-slot:title>
					<view class="titles">
						<view class="titles_left">
							<text>收费组成（电费+服务费+占仓费）</text>
						</view>
						<button @click="costMan()" type="primary" size="mini">更改资费</button>
						<view class="clear"></view>
					</view>
				</template>
				<costType :form="form"></costType>

			</uni-card>
			<uni-card title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view style="padding: 10px; float: left;">
							<text>收费配置</text>
						</view>
						<button @click="chargeConfig" type="primary" size="mini"
							style="background-color: #4DA7FF; float: right; margin-top: 14rpx;">更改收费</button>
						<view class="clear"></view>
					</view>
				</template>
				<view class="uni-body">
					<view style="color: #1976D3;">是否私有：{{ isPrivateDate[chargeTypeDetail.isPrivate] }}</view>
					<view style="color: #1976D3;">收费类型：{{ chargeTyleData[chargeTypeDetail.chargeType] }}</view>
				</view>
			</uni-card>

			<uni-card title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view style="padding: 10px; float: left;">
							<text>功率</text>
						</view>
						<button @click="powerConfig" type="primary" size="mini"
							style="background-color: #4DA7FF; float: right; margin-top: 14rpx;">更改功率</button>
						<view class="clear"></view>
					</view>
				</template>
				<view class="uni-body">
					<text style="color: #1976D3;">支持最大功率：{{ powerLimit || 0 }}瓦</text>
				</view>
			</uni-card>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" title="提示" content="是否启用格口？" @confirm="doConfrim()"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import {
		chargeTmpl,
		equip,
		chargeCabint,
		control
	} from '@/api/equip.js';
	import costType from "@/components/costType.vue";
	import {
		overPowerCode,
		totalPowerCode,
		normallyOpenCode
	} from '@/common/interface.js';
	export default {
		components: {
			costType
		},
		data() {
			return {
				form: {},
				cabinetBins: [],
				chargeId: '',
				eqId: '',
				powerLimit: '',
				msgType: '',
				messageText: '',

				chargeId: '', //资费模板id
				equipid: '', //充电柜id

				code: '', //充电柜编码
				dataDetail: {},
				statusData: {
					0: '空闲',
					1: '使用中',
					2: '故障'
				},
				signalData: {
					1: "/static/signal1.png",
					2: "/static/signal2.png",
					3: "/static/signal3.png",
					4: "/static/signal4.png",
					5: "/static/signal5.png",
				},
				wareList: [], //仓list
				chargeTypeDetail: {}, //收费相关
				chargeTyleData: {},
				isPrivateDate: {
					'1': "是",
					'0': '否'
				},
				currentItem: {}, //当前格口信息
			}
		},
		// 监听模板id
		watch: {
			'form.charge.id'(newVal, oldVal) {
				if (newVal || oldVal) {
					this.chargeId = newVal;
				}
			},
			'enums.CHARGING_CABINET_CHARGE_TYPE'(newVal, oldVal) {
				this.chargeTyleData = Object.fromEntries(newVal.map(item => {
					return [item.code, item.label]
				}));
			},
		},
		computed: {
			...mapState(['enums'])
		},
		onLoad(option) {
			this.chargeId = option.chargeId;
			this.equipid = option.equipid;
			this.code = option.code;
			this.getPowerInfo();
			this.getDataList();
			this.getChargeTmpl();
			this.getBinState();
			this.isPrivate();
		},
		onShow() {

		},
		created() {
			this.$store.dispatch("enums");
		},
		methods: {
			// 获取是否私有
			isPrivate() {
				chargeCabint('/selectByCode', 'get', {
					code: this.code
				}).then(res => {
					this.chargeTypeDetail = res.data;
				})
			},
			getDataList() {
				this.$Toast.loading('加载中···')
				equip('/selectOAMAllData', 'get', {
					code: this.code
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.dataDetail = res.data;
					}
				}).catch(err => {
					console.log(err);
					uni.hideLoading();
				})
			},
			getBinState() {
				equip(`/selectBins?code=${this.code}`, 'get').then(res => {}).catch(err => {
					this.wareList = err;
				})
			},
			getChargeTmpl() {
				// 获取资费模板信息
				chargeTmpl('/getChargeTmplById', 'get', {
						code: this.code
					}).then(res => {
						uni.hideLoading();
						let datas = res.data;
						datas.duration = datas.chargeTmplPriceList.filter(item => item.type == 'DURATION' || item
							.type == '按时'); //按时
						datas.quantity = datas.chargeTmplPriceList.filter(item => item.type == 'QUANTITY' || item
							.type == '按量'); //按量

						this.form = datas;
						this.chargeId = datas.id;
					})
					.catch(err => {
						uni.hideLoading();
					})
			},
			// 获取功率信息
			getPowerInfo() {
				equip('/selectParams', 'get', {
						code: this.code,
						overPowerCode: overPowerCode,
						totalPowerCode: totalPowerCode,
						normallyOpenCode: normallyOpenCode
					}).then(res => {})
					.catch(err => {
						uni.hideLoading();
						err.forEach((item) => {
							if ('06040101' == item.protocolSemaphoreCode) {
								this.powerLimit = item.value;
							}
						})
					})
			},
			// 启用格口
			doConfrim() {
				this.$Toast.loading('操作中');
				control('/doorEnable', 'post', {
					chargingCabinetCode: this.code,
					binIndex: this.currentItem.binIndex
				}).then(res => {
					uni.hideLoading();

					if (res.code == 200) {
						this.$Toast.success('启用成功');
						setTimeout(() => {
							this.getBinState();
						}, 1500)
					}
				}).finally(complete => {
					this.$refs.alertDialog.close();
				});
			},

			// 跳转仓详情页
			wareDetail(item) {
				this.currentItem = item;
				// 判断仓状态是否启用 1启用，0未启用
				if (!item.doorIsEnable) {
					this.$refs.alertDialog.open();
					return;
				}
				// 充电仓状态和充电仓id
				uni.navigateTo({
					url: `/pages/equipment/warehouseDetail?code=${this.code}&binIndex=${item.binIndex}&binId=${item.id}&binstatus=${item.status}`
				});
			},
			// 跳转功率页
			powerConfig() {
				uni.navigateTo({
					url: `/pages/equipment/powerConfig?equipid=${this.equipid}&code=${this.code}`
				});
			},
			// 跳转资费配置页
			costMan() {
				uni.navigateTo({
					url: '/pages/equipment/costManagement?chargeId=' + this.chargeId + '&equipid=' + this.equipid +
						'&code=' + this.code
				});
			},
			chargeConfig() {
				uni.navigateTo({
					url: `/pages/equipment/chargeConfig?equipid=${this.equipid}&code=${this.code}&chargeId=${this.chargeId}`
				});
			},
			// 拨打联系电话
			telPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/common.scss";

	.header {
		width: 100%;
		background-color: #1976D3;
		height: 70px;
		position: fixed;
		top: 0px;
	}

	.content {
		margin-top: 10px;
	}

	.dehead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;

		.name {
			max-width: 90%;
			display: inline-block;
		}
	}

	.uni-body {
		/* white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; */
	}

	.wareHouse {
		width: 20%;
		height: 20%;
		float: left;
		margin-left: 27rpx;
		margin-top: 15px;
	}

	.wareHouseText {
		width: 100%;
		text-align: center;
		float: left;
		margin-top: 5px;
	}

	.wareHouse1,
	.wareHouse2,
	.wareHouse3,
	.enableClass {
		position: relative;
		width: 93%;
		height: 100%;
		line-height: 105rpx;
		text-align: center;
		border-radius: 10px;
	}

	.wareHouse1 {
		border: 2px solid #20B13B;
		color: #20B13B;
	}

	.wareHouse2 {
		border: 2px solid #FE9201;
		color: #FE9201;
	}

	.wareHouse3 {
		border: 2px solid #BEBEBE;
		color: #BEBEBE;
	}

	.enableClass {
		border: 2px solid red;
		color: red;
	}


	/deep/ button::after {
		border: none;
	}

	/deep/ .uni-table-tr {
		display: block !important;
		width: 100% !important;
		background-color: #EFF8FF !important;
		color: #346D9C !important;
		border: 1px solid #FFFFFF !important;
	}

	/deep/ .uni-table-td {
		display: block !important;
		width: 100% !important;
		color: #000000 !important;
		border: 1px solid #FFFFFF !important;
		padding: 5px !important;
		vertical-align: middle !important;
	}

	/deep/ .uni-table-th {
		display: block !important;
		width: 100% !important;
		color: #346D9C !important;
		border: 1px solid #FFFFFF !important;
		padding: 5px !important;
	}

	.titles {
		@include flexLayout(space-between, center);
		padding: 20rpx 0;
		border-bottom: 1px solid #E6E6E6;

		&_left {
			width: 70%;
		}

		button {
			height: 58rpx;
			background-color: #4DA7FF;
		}
	}
</style>
